<template>
  <div class="app-container">
    <rich-table
      :search-config="searchConfig"
      :el-table="elTable"
      :async-data="asyncData"
      @tap="handleTap"
    >
      <div slot="page-operations">
        <el-button type="primary">新增</el-button>
      </div>
    </rich-table>
  </div>
</template>

<script>
import { getList } from '@/api/table'
import { itemsMap, initTableConfig, btnsGroup } from './data'
import RichTable from '@/components/RichTable'
export default {
  name: 'Table',
  components: {
    RichTable
  },
  data() {
    return {
      // 搜索条件表单配置
      searchConfig: {
        beforeSearch(val) {
          val['subject_type'] = val.subject_type.slice(-1)[0] || ''
          return val
        },
        itemsMap: itemsMap
      },
      // 表格列配置
      elTable: {
        columns: initTableConfig(),
        // 表格行操作表格
        btnsGroup,
        // 表格高度
        height: 400,
        stripe: true
      },
      asyncData: {
        // 异步数据请求api
        api: getList,
        isInitial: true
      }

    }
  },
  created() {
  },
  methods: {
    // 按钮点击事件
    handleTap(event) {
      const { btn, rowInfo } = event
      console.log(btn, rowInfo)
    }
  }
}
</script>
